@import '@/style/variables.less';

@media screen and (max-width: 767px) {

  .title-container{
    font-size: 12px !important;
    color: black;
    margin: 14vh 50px 20px ;
  }
  /deep/.t-form{
    margin-left:50px ;
  }
  /deep/.t-tabs__content{
    // margin-right:50px ;
  }
  .light {
    &.login-wrapper {
      background-color: white;

    }
  }
  .login-wrapper {
    /deep/ .logo {

    }
    /deep/ .login-container {
      .title-container {

      }
      .login {
        width: 375px !important;
        .login-swiper {
          display: none;
        }
      }
    }
  }
  /deep/.verify-inp {
    margin-right: 20px;
  }
  /deep/.t-form__controls{
    margin-right: 50px !important;
    margin-top: 20px;
  }
  .switch-container {
    margin: 14px 60px;

    .tip {
      font-size: 14px;
      color: var(--td-brand-color-8);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      margin-right: 14px;

      &:last-child {
        &::after {
          display: none;
        }
      }
      &::after {
        content: '';
        display: block;
        width: 1px;
        height: 12px;
        background: var(--td-gray-color-3);
        margin-left: 14px;
      }
    }
  }
  /deep/.web-login,.web-forget,.web-register{
    margin: 50px 50px 0 50px !important;
  }
  /deep/.check-container .remember-pwd{
    margin-top: 10px !important;
  }
  .login-wrapper {
    height: 100vh;
    width: 100vw;
    // background-color: rgb(218, 87, 87) !important;
    background:no-repeat url('@/assets/login/assets-login-bg-white.png')  !important  ;
    // background-size: 30% 30%;
    background-size:cover;
  }
}


@media screen and (min-width: 768px) {
  /deep/.backImg{
    display: none;
  }
  /deep/.light {
    &.login-wrapper {
      background-color: white;
      background-image: url('@/assets/assets-login-bg-white.png') !important;
    }
  }

  .login-wrapper {
    // min-width:1350px !important;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-position: 100%;
    position: relative;
  }

  .login-container {
    min-width: 200px !important;
    position: absolute;
    top: 22%;
    left: calc(19vw - 130px);
    width:44vw;
    min-height: 500px;
    line-height: 22px;
    .login{
      width: 375px !important;
    }
  }

  .title-container {
    .title {
      font-size: 36px;
      line-height: 44px;
      color: var(--td-text-color-primary);
      margin-top: 4px;

      &.margin-no {
        margin-top: 0;
      }
    }
    .sub-title {
      margin-top: 16px;

      .tip {
        display: inline-block;
        margin-right: 8px;
        font-size: 14px;

        &:first-child {
          color: var(--td-text-color-secondary);
        }

        &:last-child {
          color: var(--td-text-color-primary);
          cursor: pointer;
        }
      }
    }
  }

  .item-container {
    margin-top: 48px;

    &.login-qrcode {
      .tip-container {
        width: 192px;
        margin-bottom: 16px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;

        .tip {
          color: var(--td-text-color-primary);
        }

        .refresh {
          display: flex;
          align-items: center;
          color: var(--td-brand-color);

          .t-icon {
            font-size: 14px;
          }

          &:hover {
            cursor: pointer;
          }
        }
      }

      .bottom-container {
        margin-top: 32px;
      }
    }

    &.login-phone {
      .bottom-container {
        margin-top: 66px;
      }
    }

    .check-container {
      display: flex;
      align-items: center;

      &.remember-pwd {
        margin-bottom: 16px;
        justify-content: space-between;
      }

      .t-checkbox__label {
        color: var(--td-text-color-secondary);
      }

      span {
        color: var(--td-brand-color);

        &:hover {
          cursor: pointer;
        }
      }
    }

    .verification-code {
      display: flex;
      align-items: center;

      .t-form__controls {
        width: 100%;

        button {
          flex-shrink: 0;
          width: 102px;
          height: 40px;
          margin-left: 11px;
        }
      }
    }

    .btn-container {
      margin-top: 48px;
    }
  }

  .switch-container {
    margin-top: 24px;

    .tip {
      font-size: 14px;
      color: var(--td-brand-color-8);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      margin-right: 14px;

      &:last-child {
        &::after {
          display: none;
        }
      }

      &::after {
        content: '';
        display: block;
        width: 1px;
        height: 12px;
        background: var(--td-gray-color-3);
        margin-left: 14px;
      }
    }
  }

  .check-container {
    font-size: 14px;
    color: var(--td-text-color-secondary);

    .tip {
      float: right;
      font-size: 14px;
      color: var(--td-brand-color-8);
    }
  }

  .copyright {
    font-size: 14px;
    position: absolute;
    left: 5%;
    bottom: 64px;
    color: var(--td-text-color-secondary);
  }
}



@media screen and (max-height: 700px) {
  .copyright {
    display: none;
  }
}
